<template>
	<cl-crud ref="crud" @load="onLoad">
		<cl-pagefull>
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search" @reset="changeBiz">
						<cl-filter label="所属事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="请选择"
								clearable
								filterable
								@change="refresh"
							>
								<el-option
									v-for="item in brandList"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
					</cl-filter-group>
					<cl-flex1 />
					<div>
						<el-button icon="el-icon-plus" type="primary" @click="openForm()">
							新增活码
						</el-button>
					</div>
				</el-row>
			</template>

			<el-row>
				<!-- 数据表格 -->
				<cl-table v-bind="table">
					<cl-empty slot="empty" />
					<template #column-qrcode="{ scope: { row } }">
						<cl-avatar
							:src="row.qr_code"
							:radius="false"
							:size="90"
							preview
							shape="square"
						/>
					</template>
					<template #column-num="{ scope: { row } }">
						<el-button type="text" size="medium" @click="lookNum('cus', row)">
							{{ row.customer_num || 0 }}
						</el-button>
						<span>&nbsp;/&nbsp;</span>
						<el-button type="text" size="medium" @click="lookNum('staff', row)">
							{{ row.staff_num || 0 }}
						</el-button>
					</template>
					<template #column-opt="{ scope: { row } }">
						<div class="flex flex-align-start">
							<el-button type="danger" @click="openForm(true, row)">修改</el-button>
							<el-button
								type="primary"
								@click="
									downloadImg(
										row.qrcode ||
											'https://wework.qpic.cn/wwpic/68162_1scWpW9LSiSLYf__1626762086/0',
										'qrcode_' + row.id
									)
								"
								>下载</el-button
							>
							<el-button @click="remove(row)">删除</el-button>
						</div>
					</template>
				</cl-table>
			</el-row>

			<template #foot>
				<el-row type="flex">
					<cl-flex1 />
					<!-- 分页控件 -->
					<zm-pagination />
				</el-row>
			</template>
		</cl-pagefull>
		<live-code-form ref="form" @confirm="refresh" />
		<look-cus-staff ref="look" />
	</cl-crud>
</template>
<script>
import LiveCodeForm from "./components/live-code-form";
import LookCusStaff from "./components/look-cus-staff";
export default {
	name: "WorkwechatLivecode",
	components: {
		LiveCodeForm,
		LookCusStaff
	},
	data() {
		return {
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [
					{ type: "index", label: "#", width: 50, fixed: true },
					{ label: "所属事业部", prop: "biz_name", minWidth: 120 },
					{ label: "品牌", prop: "bra_name", minWidth: 120 },
					{ label: "二维码", prop: "qrcode", width: 120 },
					{
						label: "活码类型",
						prop: "code_type",
						width: 120,
						formatter: row => (row.code_type == 2 ? "多人" : "单人")
					},
					{ label: "活码名称", prop: "name", minWidth: 120 },
					{ label: "客户数/成员数", prop: "num", minWidth: 120 },
					{ label: "操作", prop: "opt", width: 210, fixed: "right" }
				]
			},
			search: {
				biz_id: "",
				bra_id: ""
			},
			brandList: []
		};
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
		this.initData();
	},
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.workwechat)
				.set("dict", {
					api: {
						page: "contactWayList"
					}
				})
				.done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh(reset = true) {
			let params = { ...this.search };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
		},
		async initData() {
			const { biz_id } = this.search;
			this.brandList = (await this.$store.dispatch("common/getBizBrands", { biz_id })) || [];
			// this.companyList =
			// 	(await this.$store.dispatch("common/getBizCompany", { biz_id })) || [];
		},
		changeBiz() {
			this.search = {
				...this.search,
				bra_id: ""
			};
			this.initData();
			this.refresh();
		},
		// 打开表单
		openForm(editing = false, data = {}) {
			this.$refs.form.open(editing, data);
		},
		// 删除
		remove({ id }) {
			this.confirm()
				.then(async () => {
					await this.$service.workwechat.delContactWay({ id });
					this.$message.success("操作成功");
					this.refresh();
				})
				.catch(() => {});
		},
		// 图片下载
		downloadImg(imgsrc, name) {
			//下载图片地址和图片名
			let image = new Image();
			// 解决跨域 Canvas 污染问题
			image.setAttribute("crossOrigin", "anonymous");
			image.onload = function() {
				let canvas = document.createElement("canvas");
				canvas.width = image.width;
				canvas.height = image.height;
				let context = canvas.getContext("2d");
				context.drawImage(image, 0, 0, image.width, image.height);
				let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
				let a = document.createElement("a"); // 生成一个a元素
				let event = new MouseEvent("click"); // 创建一个单击事件
				a.download = name || "photo"; // 设置图片名称
				a.href = url; // 将生成的URL设置为a.href属性
				a.dispatchEvent(event); // 触发a的单击事件
			};
			image.src = imgsrc;
		},
		// 查看客户/成员
		lookNum(type, row) {
			this.$refs.look.open(type, row);
		}
	}
};
</script>
<style lang="scss" scoped></style>
